import React from 'react'
import { Modal, ModalProps, Spin } from 'antd'
import Loading from '../Loading'

export interface ModalController {
  open: () => void
  close: () => void
  loading: () => void
  closeLoading: () => void
  visible: boolean
  loadingState: boolean
}

export function useModal(): ModalController {
  const [visible, setVisible] = React.useState(false)
  const [loadingState, setLoadingState] = React.useState(false)

  return {
    open: () => setVisible(true),
    close: () => setVisible(false),
    loading: () => setLoadingState(true),
    closeLoading: () => setLoadingState(false),
    visible,
    loadingState,
  }
}

interface LHModalProps extends ModalProps {
  modal: ModalController
  children?: React.ReactNode
}

const LHModal: React.FC<LHModalProps> = ({
  modal,
  children,
  ...props
}: LHModalProps) => {
  return (
    <Modal
      open={modal.visible}
      // confirmLoading={modal.loadingState}
      okText='确认'
      cancelText='取消'
      onCancel={() => {
        modal.close()
      }}
      {...props}
    >
      {!modal.loadingState && children}
      {modal.loadingState && <Loading />}
    </Modal>
  )
}

export default LHModal